<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 页面标题 -->
    <title>探索世界后台管理系统</title>

    <!-- 引入Vue.js框架 -->
    <script src="/js/vue.js"></script>
    <!-- 引入自定义CSS样式 -->
    <link type="text/css" rel="stylesheet" href="/css/index.css">
    <!-- 引入自定义JavaScript -->
    <script src="/js/index.js"></script>
    <!-- 引入axios HTTP客户端 -->
    <script src="/js/axios.min.js"></script>
    <style>
        /* CSS变量定义，用于统一管理颜色主题 */
        :root {
            --primary-color: #2c5f3e;     /* 主要颜色 */
            --secondary-color: #4a7c59;   /* 次要颜色 */
            --accent-color: #8fbc8f;      /* 强调色 */
            --sidebar-color: #3a5a48;     /* 侧边栏颜色 */
            --header-color: #2c5f3e;      /* 头部颜色 */
            --footer-color: #1d402e;      /* 底部颜色 */
            --main-bg-color: #f0f8f0;     /* 主背景色 */
            --hover-color: #3d8b5a;       /* 悬停颜色 */
            --level1-color: #2c5f3e;      /* 树形菜单一级颜色 */
            --level2-color: #3a7550;      /* 树形菜单二级颜色 */
            --level3-color: #478a61;      /* 树形菜单三级颜色 */
            --level4-color: #54a072;      /* 树形菜单四级颜色 */
        }

        /* 页面基本样式设置 */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: var(--main-bg-color);
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            /* 背景图案：使用SVG生成的树叶状装饰图案 */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0f8f0"/><circle cx="10" cy="10" r="2" fill="%238fbc8f" opacity="0.3"/><circle cx="30" cy="20" r="3" fill="%234a7c59" opacity="0.2"/><circle cx="70" cy="15" r="1.5" fill="%232c5f3e" opacity="0.2"/></svg>');
        }

        /* Element UI容器样式 */
        #app, .el-container {
            height: 100%;
        }

        /* 页面头部样式 */
        .el-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background-color: var(--header-color) !important;
            color: #fff !important;
            line-height: 60px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border-bottom: 3px solid var(--accent-color);
            position: relative;
        }

        /* 头部管理员信息区域 */
        .header-admin {
            display: flex;
            align-items: center;
        }

        /* 头部标题居中显示 */
        .header-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            font-family: 'Courier New', Courier, monospace;
        }

        /* 头部菜单区域 */
        .header-menu {
            display: flex;
            align-items: center;
        }

        /* 侧边栏样式 */
        .el-aside {
            background-color: var(--sidebar-color) !important;
            color: #fff !important;
            border-right: 2px solid var(--accent-color);
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* 树形菜单容器 */
        .tree-container {
            flex: 1;
            overflow-y: auto;
            padding: 10px 5px;
        }

        /* 自定义滚动条样式 */
        .tree-container::-webkit-scrollbar {
            width: 8px;
        }

        .tree-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .tree-container::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 4px;
        }

        .tree-container::-webkit-scrollbar-thumb:hover {
            background: var(--hover-color);
        }

        /* 树形控件样式 */
        .el-tree {
            background-color: transparent !important;
            color: #fff !important;
        }

        /* 不同层级树节点的背景色 */
        .el-tree-node.level-1 > .el-tree-node__content {
            background-color: var(--level1-color);
        }

        .el-tree-node.level-2 > .el-tree-node__content {
            background-color: var(--level2-color);
        }

        .el-tree-node.level-3 > .el-tree-node__content {
            background-color: var(--level3-color);
        }

        .el-tree-node.level-4 > .el-tree-node__content {
            background-color: var(--level4-color);
        }

        /* 树节点内容样式 */
        .el-tree-node__content {
            border-radius: 4px;
            margin-bottom: 4px;
            transition: all 0.3s ease;
            height: 40px;
        }

        /* 树节点悬停效果 */
        .el-tree-node__content:hover {
            background-color: var(--hover-color) !important;
            transform: translateX(5px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* 当前选中节点样式 */
        .el-tree-node.is-current > .el-tree-node__content {
            background-color: var(--accent-color) !important;
            color: #fff;
            box-shadow: 0 0 8px rgba(143, 188, 143, 0.6);
        }

        /* 主内容区域样式 */
        .el-main {
            background-color: var(--main-bg-color) !important;
            color: var(--primary-color) !important;
            padding: 20px;
            height: calc(100% - 40px);
            overflow: auto;
        }

        /* 页面底部样式 */
        .el-footer {
            background-color: var(--footer-color) !important;
            color: #fff !important;
            text-align: center;
            line-height: 40px;
            height: 40px !important;
            border-top: 2px solid var(--accent-color);
        }

        /* 菜单样式 */
        .el-menu {
            background-color: transparent !important;
        }

        /* 水平菜单项样式 */
        .el-menu--horizontal > .el-submenu,
        .el-menu--horizontal > .el-menu-item {
            color: #fff !important;
            height: 60px;
            line-height: 60px;
        }

        /* 菜单项悬停效果 */
        .el-menu--horizontal > .el-submenu:hover,
        .el-menu--horizontal > .el-menu-item:hover {
            background-color: var(--hover-color) !important;
        }

        /* 标签页样式 */
        .el-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .el-tabs__content {
            flex: 1;
            overflow: auto;
        }

        /* 卡片式标签页头部样式 */
        .el-tabs--card > .el-tabs__header {
            border-bottom: none !important;
        }

        /* 标签页项样式 */
        .el-tabs__item {
            color: var(--primary-color) !important;
            font-weight: 700;
            background-color: #d4e8d4;
            border: 1px solid var(--accent-color);
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
            transition: all 0.3s;
        }

        /* 激活的标签页项样式 */
        .el-tabs__item.is-active {
            color: #fff !important;
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            height: 38px;
            line-height: 38px;
        }

        /* 标签页内嵌iframe样式 */
        .el-tab-pane iframe {
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            padding: 15px;
            border: 1px solid var(--accent-color);
            width: 100%;
            height: 100%;
        }

        /* 树节点标签样式 */
        .el-tree-node__label {
            font-size: 14px;
        }

        /* 装饰性叶子图标 */
        .decoration-leaf {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: var(--accent-color);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            margin: 0 5px;
            vertical-align: middle;
        }

        /* 底部链接样式 */
        .el-footer a {
            color: #b0e0b0 !important;
            text-decoration: none;
        }

        .el-footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!-- Vue应用根元素 -->
<div id="app">
    <el-container>
        <!-- 页面头部区域 -->
        <el-header>
            <!-- 左侧管理员图标 -->
            <div class="header-admin">
                <i class="el-icon-user" style="color: #fff; font-size: 18px;"></i>
                <span id="userName" style="color: #fff; margin-left: 8px;">管理员</span>
            </div>

            <!-- 中间标题 -->
            <div class="header-title">
                <span class="decoration-leaf"></span>
                探索世界管理系统
                <span class="decoration-leaf"></span>
            </div>

            <!-- 右侧菜单 -->
            <div class="header-menu">
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        :popper-append-to-body="false"
                >
                    <!-- 工作台下拉菜单 -->
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i> 我的工作台
                        </template>
                        <!-- 修改密码菜单项 -->
                        <el-menu-item index="2-1" @click="handleModifyPwd">
                            <i class="el-icon-lock"></i> 修改密码
                        </el-menu-item>
                        <!-- 用户退出菜单项 -->
                        <el-menu-item index="2-3" @click="handlelogout">
                            <i class="el-icon-switch-button"></i> 结束探险
                        </el-menu-item>
                    </el-submenu>
                    <!-- 当前用户头像显示 -->
                    <div style="display: flex; align-items: center; height: 60px; margin-left: 20px;">
                        <img
                                id="userAvatar"
                                src="/img/avatar/1cfe3f859c9644029789193ce250dea8.jpg"
                                alt="用户头像"
                                style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);"
                        >
                    </div>
                </el-menu>
            </div>
        </el-header>

        <!-- 主体容器 -->
        <el-container style="height: calc(100% - 60px);">
            <!-- 侧边栏菜单 -->
            <el-aside width="200px">
                <div class="tree-container">
                    <!-- 树形菜单组件 -->
                    <el-tree
                            :data="data"
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                            node-key="id"
                            highlight-current
                            :expand-on-click-node="false"
                            :default-expanded-keys="['1']"
                            :default-checked-keys="['1']"
                    >
                        <!-- 自定义树节点内容 -->
                        <template #default="{ node, data }">
                            <span style="display: flex; align-items: center;" :class="'level-'+node.level">
                                <!-- 根据节点层级显示不同图标 -->
                                <i v-if="node.level === 1" class="el-icon-s-platform" style="color: #8fbc8f; margin-right: 5px;"></i>
                                <i v-else-if="node.level === 2" class="el-icon-s-marketing" style="color: #a8d8a8; margin-right: 5px;"></i>
                                <i v-else class="el-icon-s-claim" style="color: #c8e6c8; margin-right: 5px;"></i>
                                {{ node.label }}
                            </span>
                        </template>
                    </el-tree>
                </div>
            </el-aside>

            <!-- 右侧主内容区域 -->
            <el-container>
                <!-- 主要内容区 -->
                <el-main>
                    <!-- 标签页组件 -->
                    <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            closable
                            @tab-remove="removeTab"
                            @tab-click="handleTabClick"
                    >
                        <!-- 动态生成标签页 -->
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                            <iframe
                                    :src="item.url"
                                    frameborder="0"
                                    style="width: 100%; height: 100%; min-height: 500px; border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: #fff; border: 1px solid var(--accent-color);"
                            ></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>

                <!-- 页面底部 -->
                <el-footer>
                    <i class="el-icon-position" style="margin-right: 5px;"></i>
                    欢迎使用探索世界管理系统 | 亲友链接：
                    <!-- 外部链接 -->
                    <a href="https://www.baidu.com" target="_blank">
                        <i class="el-icon-link" style="margin-left: 5px;"></i> 百度
                    </a>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>

<!-- Vue应用逻辑 -->
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                data: [],                           // 树形菜单数据
                defaultProps: {                     // 树形菜单属性配置
                    children: 'children',           // 子节点属性名
                    label: 'label'                  // 标签属性名
                },
                editableTabsValue: '1',             // 当前激活的标签页
                editableTabs: [{                    // 标签页数组
                    title: '探索世界首页',               // 标签页标题
                    name: '1',                      // 标签页唯一标识
                    url: 'http://localhost:17112/html/back/dashboard.html'  // 标签页内容URL
                }],
                tabIndex: 1,                        // 标签页索引计数器
                activeIndex: '1',                   // 当前激活的菜单项
                currentUserId: null                 // 当前用户ID
            }
        },
        created() {
            // 组件创建时获取菜单数据
            this.fetchMenuData();
            // 获取用户信息并显示头像
            this.loadUserInfo();
        },
        methods: {
            // 异步获取菜单数据
            async fetchMenuData() {
                try {
                    // 先获取当前用户信息
                    await this.loadUserInfo();

                    // 发送GET请求获取用户菜单数据
                    const response = await axios.get('/menu/queryTreeDataByUserId', {
                        params: { userId: this.currentUserId }  // 使用动态获取的用户ID
                    });
                    // 请求成功，更新菜单数据
                    if(response.data.code === 200) {
                        this.data = response.data.data;
                    } else {
                        this.$message.error('菜单加载失败，请先登录');
                    }
                } catch(error) {
                    // 请求失败处理
                    this.$message.error('菜单加载失败，请先登录');
                    console.error(error);
                }
            },
            // 加载用户信息并显示头像
            loadUserInfo() {
                // 从session中获取当前登录用户信息
                return axios.get('/user/getCurrentUserInfo')
                    .then(response => {
                        if (response.data.code === 200) {
                            const user = response.data.data;
                            this.currentUserId = user.userId;

                            // 更新用户头像
                            const avatarImg = document.getElementById('userAvatar');
                            if (user.filePath) {
                                avatarImg.src = user.filePath;
                            }

                            // 更新用户名
                            const userNameEl = document.getElementById('userName');
                            if (user.realName) {
                                userNameEl.textContent = user.realName;
                            } else if (user.userName) {
                                userNameEl.textContent = user.userName;
                            }
                        }
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                        this.$message.error('获取用户信息失败，请重新登录');
                    });
            },
            // 处理树节点点击事件
            handleNodeClick(data) {
                // 如果节点有URL，则添加新标签页
                if (data.url) {
                    this.addTab(data.label, data.url);
                }
            },
            // 添加标签页方法
            addTab(targetName, addurl) {
                let newTabName = ++this.tabIndex + '';  // 生成新的标签页名称
                let isHaveTab = false;                  // 标记是否已存在同名标签页

                // 检查是否已存在同名标签页
                this.editableTabs.forEach(tab => {
                    if (targetName === tab.title) {
                        isHaveTab = true;
                        newTabName = tab.name;
                    }
                });

                // 如果不存在同名标签页，则添加新标签页
                if (!isHaveTab) {
                    this.editableTabs.push({
                        title: targetName,
                        name: newTabName,
                        url: addurl
                    });
                }

                // 激活当前标签页
                this.editableTabsValue = newTabName;
            },
            // 移除标签页方法
            removeTab(targetName) {
                // 至少保留一个标签页
                if(this.editableTabs.length <= 1) {
                    this.$message.warning('至少保留一个标签页');
                    return;
                }

                // 确认关闭标签页
                this.$confirm('确定关闭当前标签页?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;

                    // 如果关闭的是当前激活的标签页，则激活相邻标签页
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    // 更新激活的标签页和标签页列表
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }).catch(() => {});
            },
            // 用户退出方法
            handlelogout() {
                // 发送退出请求
                axios.get('/user/logout')
                    .then(response => {
                        // 退出成功则跳转到登录页
                        if (response.data.code === 200) {
                            location.href = '/html/back/login.html';
                        } else {
                            this.$message.error("退出失败");
                        }
                    })
                    .catch(error => {
                        // 请求失败处理
                        this.$message.error("退出请求失败");
                        console.error(error);
                    });
            },
            // 用户修改密码方法
            handleModifyPwd() {
                // 直接跳转到修改密码页面
                window.location.href = '/html/back/modifyPwd.html';
            },
            // 标签页点击处理方法
            handleTabClick(tab) {
                console.log('当前激活标签:', tab.name);
            }
        }
    });
</script>
</body>
</html>